<template>
	<div class="app-container">
		<el-tabs v-model="activeTab" size="mini">
			<el-tab-pane label="运行失败提醒" name="failureTab">
				<div class="failure">
					<el-checkbox v-model="platFormWarn" label="平台提醒" name="type" @change="handleChange">平台提醒</el-checkbox>
					<span
						>勾选即可开启定时调度任务平台通知<br />
						您将在运维工作台页面看到此通知！</span
					>
				</div>
			</el-tab-pane>
			<el-tab-pane label="推送对象管理" name="pushTab">
				<push-obj-management></push-obj-management>
			</el-tab-pane>
			<el-tab-pane label="发送邮箱设置" name="emailTab">
				<send-email></send-email>
			</el-tab-pane>
		</el-tabs>
		<download-panel></download-panel>
	</div>
</template>
<script lang="tsx" name="globalSetting" setup>
import { ref, reactive, toRefs, onMounted, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import sendEmail from './sendEmail.vue';
import pushObjManagement from './pushObjManagement.vue';
import { getPlatformReminderState, updatePlatformReminderState } from '@/api/ops-workbench/timeSchedule/globalSetting'

const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute();
let activeTab = ref('failureTab');
let platFormWarn = ref(false);

onMounted(() => {
	getState();
});

function handleChange(){
	setState();
}

function getState(){
	getPlatformReminderState().then((res: ApiResponse) => {
		if( res.code !== 0 ){
			proxy?.$message.error(res.msg);
		}
		platFormWarn.value = res.data?.platformReminderState === 1;
	});
}

// 修改通知状态，修改失败需要还原
function setState(){
	let status = platFormWarn.value === true ? 1 : 0;
	updatePlatformReminderState(status).then((res: ApiResponse) => {
		if( res.code !== 0 ){
			proxy?.$message.error(res.msg);
			platFormWarn.value = !platFormWarn.value;
		}
		const msg = status === 1 ? '开启通知' : '关闭通知';
		proxy?.$message.success(msg);
	}).catch(() => {
		platFormWarn.value = !platFormWarn.value;
	});
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.failure {
	display: flex;
	// align-items: flex-start;
	height: 50px;
	line-height: 20px;
	span {
		position: relative;
		top: 5px;
		left: 10px;
		color: var(--el-color-primary);
	}
}
</style>
